<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>004Task</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
  </head>
  <body>
    <main>
      <input id="inp输入框" type="text" placeholder="添加新任务">
      <section id="uncomp">
        <h3>未完成</h3>
      </section>
      <section id="comp">
        <h3>完成</h3>
      </section>
    </main>
  </body>
  <script>
    inp输入框.onkeyup = function(e)
    {
      if(e.keyCode == 13 && //13是回车键
         this.value!="")
      {
        let article = document.createElement("article");
        {
          article.innerHTML = this.value;

          let 删除 = function()
          {
            let 父节点 = this.parentNode;
            let 容器 = 父节点.parentNode;
            容器.removeChild(父节点);
          };

          let 删除按钮 = document.createElement("i");
          {
            删除按钮.className = "fa fa-trash-alt";
            删除按钮.addEventListener("click",删除);
          }
          article.appendChild(删除按钮);

          let 完成按钮 = document.createElement("i");
          {
            完成按钮.className = "fa fa-check";
            完成按钮.addEventListener("click", function()
            {
              let 父节点 = this.parentNode;
              父节点.removeChild(父节点.childNodes[2]);
              let 容器 = comp;
              容器.appendChild(父节点);
            });
          }
          article.appendChild(完成按钮);
        }
        uncomp.appendChild(article);
        this.value="";
      }
    }
  </script>
</html>

<!-- <article>
  任务
  <i class="fa fa-trash-alt"></i>
  <i class="fa fa-check"></i>
</article>
<article>
  任务
  <i class="fa fa-trash-alt"></i>
  <i class="fa fa-check"></i>
</article> -->

<!-- <article>
  任务
  <i class="fa fa-trash-alt"></i>
</article>
<article>
  任务
  <i class="fa fa-trash-alt"></i>
</article> -->

<!-- // uncomp.innerHTML += 
// `<article>
//   ${this.value}
//   <i class="fa fa-trash-alt"></i>
//   <i class="fa fa-check"></i>
// </article>` -->